<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图展示</title>
  
  <!-- 离线地图 -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c6faf44588a2b4f0a60798b74eda33d4&plugin=AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.TileLayer,AMap.TileLayer.Satellite,AMap.TileLayer.RoadNet"></script>
  
  <!-- Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <!-- ElementUI Plus -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  
  <!-- Axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
  <!-- 图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@element-plus/icons-vue/dist/index.css">
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
      background-color: #f5f7fa;
    }

    /* 只显示地图区域 */
    #app {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .map-container {
      flex: 1;
      width: 100%;
      height: 100%;
      position: relative;
    }
    
    #map {
      width: 100%;
      height: 100%;
    }
    
    /* 地图工具栏样式 */
    .map-toolbar {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      padding: 10px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .map-toolbar .el-button {
      margin: 0 5px;
    }
    
    /* 地图加载提示 */
    .map-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="map-container">
      <div id="map">
        <!-- 地图加载提示 -->
        <div v-if="!mapLoaded" class="map-loading">
          <el-icon style="font-size: 24px; color: #409eff;" class="is-loading"><Loading /></el-icon>
          <div style="margin-top: 10px; color: #666;">地图加载中...</div>
        </div>
        
        <!-- 数据加载提示 -->
        <div v-if="loading" class="map-loading">
          <el-icon style="font-size: 24px; color: #409eff;" class="is-loading"><Loading /></el-icon>
          <div style="margin-top: 10px; color: #666;">正在加载机房数据...</div>
        </div>
      </div>
      
      <!-- 地图工具栏 -->
      <div class="map-toolbar" v-if="mapLoaded">
        <el-button-group>
          <el-button size="small" @click="setMapCenter" title="重置地图中心">
            <el-icon><Location /></el-icon>
            重置中心
          </el-button>
          <el-button size="small" @click="toggleMapLayer" title="切换地图图层">
            <el-icon><Switch /></el-icon>
            切换图层
          </el-button>
          <el-button 
            size="small" 
            :type="showFiberLines ? 'primary' : 'default'" 
            @click="toggleFiberLines" 
            title="显示/隐藏光缆线">
            <el-icon><Connection /></el-icon>
            光缆线显示
          </el-button>
          <el-button size="small" type="danger" @click="clearAllCards" title="清除所有信息卡片">
            <el-icon><Delete /></el-icon>
            清除卡片
          </el-button>
        </el-button-group>
      </div>
    </div>
  </div>

  <script>
    const { createApp } = Vue;
    const { ElMessage, ElMessageBox } = ElementPlus;
    
    createApp({
      data() {
        return {
          map: null,
          mapLoaded: false,
          loading: false,
          showFiberLines: true,
          currentLayer: 'normal', // normal, satellite, roadnet
          rooms: [],
          fibers: [],
          selectedRoom: null,
          highlightedFiber: null,
          mapMarkers: [],
          fiberLines: []
        };
      },
      
      mounted() {
        this.initMap();
        this.loadData();
      },
      
      methods: {
        // 初始化地图
        initMap() {
          this.map = new AMap.Map('map', {
            zoom: 6,
            center: [116.397428, 39.90923], // 北京
            mapStyle: 'amap://styles/normal',
            viewMode: '3D',
            pitch: 45,
            rotation: 0,
            features: ['bg', 'road', 'building', 'point'],
            showLabel: true,
            showBuildingBlock: true
          });
          
          this.map.on('complete', () => {
            this.mapLoaded = true;
            console.log('地图初始化完成');
          });
        },
        
        // 加载数据
        async loadData() {
          this.loading = true;
          try {
            // 模拟数据加载
            await new Promise(resolve => setTimeout(resolve, 1000));
            
            // 模拟机房数据
            this.rooms = [
              {
                id: 1,
                name: '北京机房',
                longitude: 116.397428,
                latitude: 39.90923,
                status: 'normal',
                equipmentCount: 50
              },
              {
                id: 2,
                name: '上海机房',
                longitude: 121.473701,
                latitude: 31.230416,
                status: 'warning',
                equipmentCount: 30
              }
            ];
            
            // 模拟光缆数据
            this.fibers = [
              {
                id: 1,
                name: '北京-上海光缆',
                startRoom: 1,
                endRoom: 2,
                status: 'normal'
              }
            ];
            
            this.addMapMarkers();
            this.addFiberLines();
            
          } catch (error) {
            ElMessage.error('数据加载失败: ' + error.message);
          } finally {
            this.loading = false;
          }
        },
        
        // 添加地图标记
        addMapMarkers() {
          this.rooms.forEach(room => {
            const marker = new AMap.Marker({
              position: [room.longitude, room.latitude],
              title: room.name,
              content: this.createMarkerContent(room)
            });
            
            marker.on('click', () => {
              this.selectRoom(room);
            });
            
            this.map.add(marker);
            this.mapMarkers.push(marker);
          });
        },
        
        // 创建标记内容
        createMarkerContent(room) {
          const statusColor = room.status === 'normal' ? '#52c41a' : '#ff4d4f';
          return `
            <div class="map-marker" style="
              width: 30px;
              height: 30px;
              background: ${statusColor};
              border-radius: 50%;
              border: 2px solid #fff;
              box-shadow: 0 2px 8px rgba(0,0,0,0.3);
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-size: 12px;
              font-weight: bold;
              cursor: pointer;
            ">
              ${room.name.charAt(0)}
            </div>
          `;
        },
        
        // 添加光缆线
        addFiberLines() {
          if (!this.showFiberLines) return;
          
          this.fibers.forEach(fiber => {
            const startRoom = this.rooms.find(r => r.id === fiber.startRoom);
            const endRoom = this.rooms.find(r => r.id === fiber.endRoom);
            
            if (startRoom && endRoom) {
              const polyline = new AMap.Polyline({
                path: [
                  [startRoom.longitude, startRoom.latitude],
                  [endRoom.longitude, endRoom.latitude]
                ],
                strokeColor: '#1890ff',
                strokeWeight: 3,
                strokeOpacity: 0.8
              });
              
              this.map.add(polyline);
              this.fiberLines.push(polyline);
            }
          });
        },
        
        // 选择机房
        selectRoom(room) {
          this.selectedRoom = room;
          this.map.setCenter([room.longitude, room.latitude]);
          ElMessage.success(`已选择机房: ${room.name}`);
        },
        
        // 重置地图中心
        setMapCenter() {
          this.map.setCenter([116.397428, 39.90923]);
          this.map.setZoom(6);
        },
        
        // 切换地图图层
        toggleMapLayer() {
          const layers = ['normal', 'satellite', 'roadnet'];
          const currentIndex = layers.indexOf(this.currentLayer);
          const nextIndex = (currentIndex + 1) % layers.length;
          this.currentLayer = layers[nextIndex];
          
          this.map.setMapStyle(`amap://styles/${this.currentLayer}`);
          ElMessage.success(`已切换到${this.currentLayer}图层`);
        },
        
        // 切换光缆线显示
        toggleFiberLines() {
          this.showFiberLines = !this.showFiberLines;
          
          if (this.showFiberLines) {
            this.addFiberLines();
          } else {
            this.fiberLines.forEach(line => {
              this.map.remove(line);
            });
            this.fiberLines = [];
          }
        },
        
        // 清除所有卡片
        clearAllCards() {
          this.selectedRoom = null;
          this.highlightedFiber = null;
          ElMessage.success('已清除所有信息卡片');
        }
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>
</html>

